import React, { useState } from 'react';
import { connect, Dispatch } from 'umi';

import { ConnectState, IResponse } from '@/models/connect';
import { dashboardWidgetsItem, PanelsItem, dashboardGroupsItem } from '@/pages/SelfQuery/type';

import { Modal, Input,  message, Transfer } from 'antd';

interface AddGroupingModelProps {
  dispatch: Dispatch;
  visible: boolean;
  onCancel: () => void;
  widgetsList: Array<dashboardWidgetsItem>;
  panelsItem: PanelsItem;
  groups: Array<dashboardGroupsItem>;
}

const AddGroupModel: React.FC<AddGroupingModelProps> = (props) => {
  const { visible, onCancel, dispatch, widgetsList, panelsItem, groups } = props;
  const [selectWidgets, setSelectWidgets] = useState<Array<string>>([]); // 选择的指标
  const [groupName, setGroupName] = useState<any[string]>(''); // 分组名称

  // 选择指标
  const handleChange = (nextTargetKeys: Array<string>) => {
    setSelectWidgets(nextTargetKeys);
  };

  // 创建分组
  const establish = () => {
    if(!groupName) {
      message.warning('请输入分组名称');
      return
    }

    let obj: any = {
      dashboardId: panelsItem.dashboardId,
      groupName: groupName,
    };
    if (selectWidgets.length > 0) {
      obj.widgets = selectWidgets;
    }

    dispatch({
      type: 'board/saveCreateGroup',
      payload: obj,
      callback: (res: IResponse) => {
        const { header } = res;
        if (header.code === 200) {
          message.success('创建分组成功');
          // 重新获取看板详情
          dispatch({
            type: 'panel/fetchDashboard',
            payload: {
              portalId: panelsItem.dashboardPortalId,
              dashboardId: panelsItem.dashboardId,
            },
          });

          onCancel();
        } else {
          message.warning('创建分组失败');
        }
      },
    });
  };

  const transferData: Array<{ key: string; title: string }> = [];
  let disaplySelect: Array<string> = []
  if(groups.length) {
    groups.map(v => {
      if(v.id !== 0) {
        disaplySelect = disaplySelect.concat(v.widgets.split(','))
      }
    })
  }
  let widgetsOption: Array<dashboardWidgetsItem> = widgetsList.filter(v => disaplySelect.indexOf(String(v.widgetId)) === -1);
  widgetsOption.map((v) => {
    transferData.push({
      key: v.widgetId.toString(),
      title: v.widgetName,
    });
  });

  return (
    <Modal
      title="创建指标分组"
      okText="添加"
      destroyOnClose
      width={480}
      visible={visible}
      onOk={establish}
      onCancel={() => {
        onCancel();
      }}
    >
      <h4>分组名称</h4>
      <Input onChange={(e) => setGroupName(e.target.value)} value={groupName} />
      <h4 style={{ marginTop: '30px' }}>选择指标</h4>
      <Transfer
        listStyle={{
          width: 188,
          height: 246,
        }}
        dataSource={transferData}
        titles={['看板指标', '分组指标']}
        targetKeys={selectWidgets}
        onChange={handleChange}
        // @ts-ignore
        render={(item) => item.title}
      />
    </Modal>
  );
};

export default connect(({ indexLibrary }: ConnectState) => ({
  widgets: indexLibrary.widgets,
}))(AddGroupModel);
